<template>
	<yd-layout id='liveList'>
		<div class="content">
			<yd-infinitescroll v-show='liveList.length>0' :callback="livingList" ref="infinitescrollDemo">
				<div slot="list" class="list" v-for="item in liveList" @click="goNext(item)">
					<div class="list_header">
						<div class="list_header_top">
							<img class="list_header_top_img" :src="item.avatar" alt="" />
							<span class="c_size_30_42 c_text_ellipsis_1">{{item.nick_name}}</span>
						</div>
						<div style="background: #DCBBC9;" v-if="item.status===0" class="list_header_bottom">
							<img class="list_header_bottom_img" src="../../assets/playGif.gif" alt="" />
							<span>直播中</span>
						</div>
						<div v-else-if="item.status===1" class="list_header_bottom" style="background: #6A798F;">
							<span>课程预告</span>
						</div>
						<div v-else class="list_header_bottom" style="background: #B5B5B5;">
							<span>回&nbsp;放</span>
						</div>
					</div>
					<div class="list_title c_text_ellipsis_2 c_size_34_48">{{item.title}}</div>
					<div class="list_bottom ">
						<div class="list_bottom_password">
							<span v-if="item.status!==1">{{item.status==0?item.member_total:item.pv}}人观看</span>
							<span class="c_text_ellipsis_1" v-else>直播时间：{{item.time}}</span>
							<div v-if="item.is_req_pwd==1&&item.member==1" class="password_paly" style="color: #FE5742;">会员加密直播</div>
							<div v-else-if='item.member==1' class="password_paly" style="color: #DCBBC9;">会员直播</div>
							<div v-else-if="item.is_req_pwd==1" class="password_paly" style="color: #DCBBC9;">设有密码</div>
						</div>

					</div>
				</div>
				<!-- 数据全部加载完毕显示 -->
				<span slot="doneTip">没有更多数据了~~</span>

				<!-- 加载中提示，不指定，将显示默认加载中图标 -->
				<!--<img slot="loadingTip" src="path/img/loading.svg"/>-->
			</yd-infinitescroll>
			<NoList :strLabel='strLabel' v-show='liveList.length==0'>
				<img slot='img' src="../../assets/kong_3.png" alt="" />
			</NoList>
		</div>
		<yd-backtop></yd-backtop>
		<!--路由套壳的感觉差不多-->
		<!--<Footer slot='bottom'  activeStr='index'></Footer>-->

		<!--输入密码-->
		<yd-popup v-model="showPop" position="center" :close-on-masker='false'>
			<div class="pop_nike_name">
				<div class="title c_size_34_48">请输入6位听课密码</div>
				<div class="label">*听课密码请联系领导人获取*</div>
				<div class="pop_nike_name_input">
					<input placeholder="输入密码" oninput="if(value.length>6)value=value.slice(0,6)" type="text" v-model="passwordNum" />
				</div>
				<ul class="c_size_34_48">
					<li @click="showPop=false">取消</li>
					<li @click="postPassword()">确定</li>
				</ul>
			</div>
		</yd-popup>
	</yd-layout>

</template>

<script>
	//import mixinIndex from '../../mixin/mixinIndex.js'
	import Footer from '../../components/Footer/Footer.vue'
	import { InfiniteScroll } from 'vue-ydui/dist/lib.rem/infinitescroll';
	import { BackTop } from 'vue-ydui/dist/lib.rem/backtop';
	import { Popup } from 'vue-ydui/dist/lib.rem/popup';
	export default {
		mixins: [],
		components: {
			[Footer.name]: Footer,
			[InfiniteScroll.name]: InfiniteScroll,
			[BackTop.name]: BackTop,
			[Popup.name]: Popup,
		},
		data() {
			return {
				strLabel: '暂未加入任何集团',
				liveList: [],
				pageNum: 1,
				pageCount: 10,
				showPop: false,
				teacherList: [], //讲师团队列表
				passwordNum: '',
				listObj: {},
				mineObj: {},
			}
		},
		created() {
			

		},
		watch: {

		},
		computed: {

		},
		async mounted() {
			document.title = '会议直播间'
			var ua = navigator.userAgent;
			if(this.$root.isPc != 'pc' && ua.match(/MicroMessenger/i) != 'MicroMessenger' && (this.$root.isPcOS == 'Phone' || this.$root.isPcOS == 'Linux')) {
				await this.getToken()
			}

			await this.getMine()
			if(this.mineObj.group_name ){
				document.title = `${this.mineObj.group_name}运营集中营`
				this.livingList()
			}
		},
		methods: {
			
			//获取列表
			livingList() {
				this.$root.ajax({
					name: 'live/lst',
					type: 'get',
					params: {
						group_name: this.mineObj.group_name ,
						page: this.pageNum,
						count: this.pageCount,
					}
				}).then((d) => {
					for(let a = 0; a < d.data.live_list.length; a++) {
						d.data.live_list[a].time = this.$root.getDate(new Date(d.data.live_list[a].begin_time * 1000), {
							allTime: 2
						})
					}
					this.strLabel = '暂无内容'
					this.liveList = [...this.liveList, ...d.data.live_list];
					if(this.liveList.length >= d.data.live_total) {
						/* 所有数据加载完毕 */
						this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
						return;
					}

					/* 单次请求数据完毕 */
					this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');

					this.pageNum++;

				})
			},
			//安卓，苹果端登录
			getToken() {
				return new Promise((resolve, reject) => {
					let params = {};
					if(this.$root.isPc() == 'android') {
						params = {
							uid: this.$root.config.androidOrIosObj.user_uid,
							nick_name: this.$root.config.androidOrIosObj.user_name,
							avatar: this.$root.config.androidOrIosObj.user_photo,
							client: 1, //1安卓，2ios。3web
							item: 2, //1、报名通道；2、直销万事通APP
							channel: this.$root.config.channel,
							mobile: '',
						}
					} else {
						params = {
							uid: this.$root.config.androidOrIosObj.user_uid,
							nick_name: this.$root.config.androidOrIosObj.user_name,
							avatar: this.$root.config.androidOrIosObj.user_photo,
							client: 2, //1安卓，2ios。3web
							item: 2, //1、报名通道；2、直销万事通APP
							channel: this.$root.config.channel,
							mobile: '',
						}
					}
					this.$root.ajax({
						name: 'Index/loginin',
						params: params
					}).then((d) => {
						this.$root.userInfo = d.data
						sessionStorage.setItem('wst_xiruixy_userInfo', JSON.stringify(d.data));
						resolve()
					})
				})
			},
			//输入密码
			async postPassword() {
				if(this.passwordNum.length == 6) {
					let o = {
						room_id: this.listObj.id,
						name: 'live',
						password: this.passwordNum,
						kind: this.listObj.status,
						passwordFlg:true,
					};
					if(this.listObj.status === 0) {
						o.name = 'liveRoomDetail'
					}
					var data = await this.$root.liveFlg(o);
				} else {
					this.$dialog.toast({
						mes: '请根据提示正确输入',
						timeout: 1500
					});
				}
			},
			//去下一个页面，直播，回放，预播
			async goNext(item) {
				//判断权限
				let o = {
					room_id: item.id,
					name: 'live',
					msgRouter: true,
				};
				if(item.status === 0) {
					o.name = 'liveRoomDetail'
				}
				var data = await this.$root.liveFlg(o);
				//判断是否需要密码
				//清空密码
				this.listObj = {};
				//判断是否已经输入过密码  
				//is_req_pwd   是否需要密码，0：否，1：是
				//is_input_pwd	是否已输入过密码，0：否，1：是
				if(item.is_req_pwd == 1 && item.is_input_pwd != 1) {
					//弹出密码框
					this.showPop = true;
					this.listObj = Object.assign({}, this.listObj, item)
					this.passwordNum = ''
					return
				}

				if(item.status === 0) {
					this.$router.push({
						name: 'liveRoomDetail',
						query: {
							id: item.id,
						}
					})
				} else {
					this.$router.push({
						name: 'live',
						query: {
							id: item.id,
							kind: item.status,
						}
					})
				}
			},
			getMine() {
				return new Promise((resolve, reject) => {
					this.$root.ajax({
						name: 'my',
						params: {}
					}).then((d) => {
						this.mineObj = Object.assign({}, this.mineObj, d.data)
						resolve()
					})
				})

			},
		}
	}
</script>

<style lang="scss">
	@import './liveList.scss';
</style>